<template>
  <view class="number-step">
    <view class="reduce-action" @click="reduceAction">
      <i
        class="iconfont icon-sami-select"
        :class="value <= min ? 'disabled' : ''"
      ></i>
    </view>
    <view class="number-block">
      <input
        class="number-input"
        type="number"
        :value="value"
        @input="numberInputChange"
        :disabled="disabled"
      />
    </view>
    <view class="add-action" @click="addAction">
      <i
        class="iconfont icon-add-select"
        :class="disabled ? 'disabled' : ''"
      ></i>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      default: 0,
    },
    min: {
      type: Number,
      default: 1,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
      value (newVal) {
          this.$emit("change", newVal);
      }
  },
  methods: {
    numberInputChange(e) {
      if (e.target.value < this.min) {
        this.$emit("input", this.min);
        return;
      }
      this.$emit("input", e.target.value);
    },
    addAction() {
      if (this.disabled) return;
      this.$emit("input", this.value + 1);
    },
    reduceAction() {
      if (this.value <= 1 || this.disabled) return;
      this.$emit("input", this.value - 1);
    },
  },
};
</script>

<style scoped lang="scss">
.number-step {
  height: 60rpx;
  border: 1px solid #f2f2f2;
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  .reduce-action {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70rpx;
    position: relative;
    .iconfont {
      color: #262626;
    }
    .disabled {
      color: #cccccc;
    }
  }
  .reduce-action::after {
    content: "";
    width: 1px;
    // height: 32rpx;
    position: absolute;
    right: 0;
    top: 8rpx;
    bottom: 8rpx;
    background-color: #f2f2f2;
  }
  .number-block {
    width: 80rpx;
    height: 100%;
    display: flex;
    align-items: center;
    .number-input {
      width: 100%;
      height: 58rpx;
      font-size: 24rpx;
      font-weight: 600;
      color: #262626;
      display: inline-block;
      text-align: center;
    }
  }
  .add-action {
    width: 70rpx;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    .iconfont {
      color: #262626;
    }
  }
  .add-action::before {
    content: "";
    width: 1px;
    // height: 32rpx;
    position: absolute;
    left: 0;
    top: 8rpx;
    bottom: 8rpx;
    background-color: #f2f2f2;
  }
}
</style>
